﻿var uiBuilder = uiBuilder || {};

uiBuilder.fns = {
    dropDownField: function (field, options, data) {
        $(options.dropDownValues).each(function (index, element) {
            $('select', field).append($('<option/>').val(element.id).html(element.value));
        });
    },
    textField: function (field, options, data) {
        var input = $('input', field);
        if (options.value && data) input.val(options.value(data));
        if (options.change) input.change(function () { options.change(data, input.val()); });
    },
    textAreaField: function (field, options, data) {
        var textarea = $('textarea', field);
        if (options.value && data) textarea.val(options.value(data));
        if (options.change) textarea.change(function () { options.change(data, textarea.val()); });
    },
    separator: function (field, options, data) {
        var newDiv = $('div', field);
        newDiv.text(options.name);
        var buttons = options.buttons.slice(0).reverse();
        $(buttons).each(function (index, element) {
            var a = $('<a href="javascript: void(0);" class="separatorLink" tabindex="-1">' + element.text + '</a>');
            a.click(function () { element.action(newDiv, data); });
            newDiv.append(a);
        });
    },
    multiSelectField: function (field, options, data) {
        $(options.values).each(function (index, element) {
            var input = $('<input type="checkbox"></input>');
            if (element.selected) input.attr('checked', true);
            var label = $('<label>' + element.value + '</label><br/>');

            $('div', field).append(input);
            $('div', field).append(label);

            if (options.onAdd || options.onRemove) {
                input.change(function () {
                    if (input.is(':checked') && options.onAdd)
                        options.onAdd(element);
                    else if (!input.is(':checked') && options.onRemove)
                        options.onRemove(element);
                });
            }
        });
    }
};

uiBuilder.addField = function (targetField, fieldMetadata, options, data) {
    var newField = $('#' + options.type, fieldMetadata).clone();
    if (uiBuilder.fns[options.type]) uiBuilder.fns[options.type](newField, options, data);

    if (options.type == 'separator') {
        targetField.append(newField.children());
        return;
    }

    var newFormField = $('#formField', fieldMetadata).clone();
    $('label', newFormField).text(options.name);
    if (options.info)
        $('label', newFormField).append($('<span class="fieldInfo"/>').text(options.info));

    $('.formField', newFormField).append(newField.children());

    targetField.append(newFormField.children());
};

jQuery.fn.buildUi = function (fieldMetadata, options, data) {
    var target = $(this);
    $(options.fields).each(function (index, element) {
        uiBuilder.addField(target, fieldMetadata, element, data);
    });
};